<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>Manual for Slay the Web</title>
		<meta name="description" content="A video card game for the web" />
		<meta
			name="viewport"
			content="width=device-width, initial-scale=1.0, maximum-scale=1.0, viewport-fit=cover"
		/>
		<meta name="mobile-web-app-capable" content="yes" />
		<meta name="theme-color" content="#116f54" />
		<meta name="msapplication-TileColor" content="#116f54" />
		<link rel="icon" type="image/png" href="/images/favicons/favicon-512.png" sizes="512x512" />
		<link rel="shortcut icon" href="/images/favicons/favicon.ico" />
		<link rel="apple-touch-icon" href="/images/favicon-512.png" />
		<link rel="stylesheet" href="/src/ui/styles/index.css" />
	</head>
	<body>
		<div class="Container">
			<header class="Header">
				<h1 medium>Slay the Web</h1>
				<h2>Manual</h2>
			</header>

			<div class="Box">
				<ul class="Options">
					<li><a class="Button" href="/">Back</a></li>
				</ul>
			</div>

			<div class="Box Box--text">
				<p>
					Slay the Web is a single player card game where you fight monsters to reach the end of the web. It's
					a game of planning and knowing when to play which card.
				</p>
				<p>
					Every turn you draw 5 cards from your draw pile. Most cards cost energy to play. Energy is refreshed
					every turn.
				</p>
				<p>
					Cards may deal damage to monsters, block enemy attacks or make them weak or vulnerable. They can
					heal you and other things. You'll figure it out.
				</p>
				<p>
					Beware, whenever you end your turn, the monsters take turn. Above each target you'll get a hint
					which action it will take on it's upcoming turn.
				</p>
				<p>
					Should you manage to kill the monsters in a room before they end you, you'll proceed to the next
					room. Maybe there will be rewards. Can you reach the end?
				</p>
			</div>
			<div class="FlexGrid">
				<div class="Box Box--text">
					<p>
						All credit to the original
						<a href="https://www.megacrit.com" rel="noreferrer" target="_blank">Slay the Spire game</a>.
					</p>
				</div>
				<div class="Box Box--text">
					<p>
						<em>This</em>
						<a href="https://github.com/oskarrough/slaytheweb" rel="noreferrer" target="_blank"
							>game is open source</a
						>. It'd be wonderful with more contributors, it's (relatively) straight forward to for example,
						add new cards, monsters or fights.
					</p>
				</div>
				<div class="Box Box--text">
					<p>
						Come chat on
						<a href="https://matrix.to/#/#slaytheweb:matrix.org" rel="noreferrer" target="_blank">
							#slaytheweb:matrix.org
						</a>
					</p>
				</div>
				<div class="Box Box--text">
					<p>
						You can inspect &mdash; and modify &mdash; pretty much anything in the game using the browser's
						developer tools. This can definitity cause weird and fun behaviours.
					</p>
					<p>Open the console and type <code>stw</code> or <code>stw.help()</code>.</p>
				</div>
				<div class="Box Box--text">
					<p>Check the <a href="/map-demo.html">map component demo</a>!</p>
				</div>
				<div class="Box Box--text">
					<p>
						Read the
						<a
							href="https://github.com/oskarrough/slaytheweb/blob/main/CHANGELOG.md"
							rel="noreferrer"
							target="_blank"
							>Changelog</a
						>.<br />Latest update: <em>%VITE_GIT_MESSAGE%</em>
					</p>
				</div>
			</div>
		</div>
	</body>
</html>
